import { Breadcrumb } from "antd";
import { RouteComponentProps, withRouter } from "react-router-dom";
import { breadCrumdConfig, breadCrumdOption, path } from "./data";

const BreadCrumd = (props: RouteComponentProps) => {
  console.log(props.location.pathname);

  const url = props.location.pathname;
  let breadCrumdData: path[] = [];

  breadCrumdConfig.forEach((item: breadCrumdOption) => {
    if (item.url === url) {
      breadCrumdData = item.path;
    }
  });
  const toDist = (path: string) => {
    if (path) {
      props.history.push(path);
    }
  };

  return (
    <div
      className="bread"
      style={{ backgroundColor: "#fff", width: "100%", height: "50px" }}
    >
      <Breadcrumb separator="/">
        {breadCrumdData.map((item: path, index: number) => {
          return (
            <Breadcrumb.Item key={index} onClick={() => toDist(item.pathname)}>
              {item.desc}
            </Breadcrumb.Item>
          );
        })}
      </Breadcrumb>
    </div>
  );
};

export default withRouter(BreadCrumd);
